<template>
    <div>
        <ul class="file-multipart-viewbox">
            <template v-for="item in fileList">
                <li v-if="'bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp,avif,apng,ico'.indexOf(item.suffix)>-1">
                    <div>
                        <img :src="item.url" :alt="item.name" :title="item.name"/>
                        <div class="preview">
                            <el-icon @click="handlePreview(item)">
                                <ZoomIn/>
                            </el-icon>
<!--                            <el-icon @click="handleDel(item)">-->
<!--                                <Delete/>-->
<!--                            </el-icon>-->
                        </div>
                    </div>
                </li>
                <li v-else>
                    <div>
                        <span :title="item.name"><a :href="item.url" target="_blank" style="word-wrap: break-word;white-space: pre-line;">{{ item.name }}</a></span>
<!--                        <div class="preview">-->
<!--                            <el-icon @click="handleDel(item)">-->
<!--                                <Delete/>-->
<!--                            </el-icon>-->
<!--                        </div>-->
                    </div>
                </li>
            </template>
        </ul>
        <el-dialog v-model="dialogVisible" title="预览" width="800px" append-to-body>
            <img :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
        </el-dialog>
    </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user'

const props = defineProps({
    fileValue: [String, Object, Array],
    separator: [String]
});

const userStore = useUserStore();
const {proxy} = getCurrentInstance();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const fileList = ref([]);

watch(() => props.fileValue, val => {
    if (val) {
        var sep = props.separator == null || props.separator.length == 0 ? ',':props.separator;
        // 首先将值转为数组
        const list = Array.isArray(val) ? val : props.fileValue.split(sep);

        fileList.value = list.map(filename => {
            var file={};
            if (typeof filename === "string") {
                var name = "";
                var suffix = "";
                if (filename.lastIndexOf("/") > -1) {
                    name = filename.substring(filename.lastIndexOf("/") + 1, filename.length);
                }
                if (filename.lastIndexOf(".") > -1) {
                    suffix = filename.substring(filename.lastIndexOf(".") + 1, filename.length);
                }
                file = {name: name, suffix: suffix, filename: filename,url: userStore.ossUrl(filename)};
            }
            return file;
        });

    } else {
        fileList.value = [];
        return [];
    }
}, {deep: true, immediate: true});


// 预览
function handlePreview(file) {
    dialogImageUrl.value = file.url;
    dialogVisible.value = true;
}
// function handleDel(srcFile) {
//     var arr=[];
//     var value=[];
//     for(var i=0;i<fileList.value.length;i++){
//         if(fileList.value[i].filename != srcFile.filename){
//             arr.push(fileList.value[i]);
//             value.push(fileList.value[i].filename)
//         }
//     }
//     fileList.value=arr;
//     var sep = props.separator == null || props.separator.length == 0 ? ',':props.separator;
//     proxy.$emit('success', value.join(sep))
// }

</script>
<style lang="scss" scoped>
</style>

